<template>
  <el-dialog :visible.sync="fyjsDialog" :close-on-click-modal="false" :before-close="fyjsCancel" :fullscreen="fyjsDialog" @close="fyjsCancel">
    <div>
      <el-card class="_calendar">
        <el-container>

          <el-main width="55%">
            <div style="padding: 10px;">
              <el-date-picker v-model="query.kfqf1" type="date" value-format="yyyyMMdd" format="yyyyMMdd" style="width: 150px;" placeholder="开方起始日期" />
              <el-date-picker v-model="query.kfqf2" type="date" value-format="yyyyMMdd" format="yyyyMMdd" style="width: 150px;" placeholder="开方截至日期" />
              <el-button size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
              <el-button size="mini" type="danger" icon="el-icon-search" @click="exeDlAllFymx">删除所有费用</el-button>
            </div>
            <el-card>
              <div class="el-calendar__header">
                <div class="el-calendar__title">收费明细</div>
              </div>
              <div class="calendar-info">
                <el-table
                  ref="table"
                  v-loading="crud.loading"
                  :data="crud.data"
                  size="small"
                  style="width: 100%;"
                  @selection-change="crud.selectionChangeHandler"
                >
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="bisFymxMc" label="项目名称" />
                  <el-table-column prop="bisFymxDj" label="单价" />
                  <el-table-column prop="bisFymxSl" label="数量" />
                  <el-table-column prop="bisFymxKfrq" label="开方日期" />
                  <el-table-column prop="bisFymxZj" label="总价" />
                  <el-table-column prop="lrsj" label="录入时间" width="150px" />
                  <el-table-column prop="bisFymxSfsc" label="是否上传">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.bisFymxSfsc === '1'" effect="plain" type="success">
                        已上传
                      </el-tag>
                      <el-tag v-else effect="plain" type="danger">
                        未上传
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                      <el-button
                        type="danger"
                        size="small"
                        @click.native.prevent="exeScSingleFymx(scope.row.bisFymxId)"
                      >
                        撤回并删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--分页组件-->
                <pagination />
              </div>
            </el-card>
          </el-main>

          <el-aside width="45%">
            <el-card>
              <div class="calendar-info">
                <el-descriptions title="本地项目信息" :column="3" border>
                  <el-descriptions-item label="明细总计" :content-style="{'width': '18%'}"><el-tag>{{ this.local_zl }}条</el-tag></el-descriptions-item>
                  <el-descriptions-item label="已上传" :content-style="{'width': '18%'}"><el-tag type="success">{{ this.local_ysc }}条</el-tag></el-descriptions-item>
                  <el-descriptions-item label="未上传" :content-style="{'width': '18%'}"><el-tag type="danger">{{ this.local_wsc }}条</el-tag></el-descriptions-item>
                  <el-descriptions-item label="入院日期">{{ this.local_ryrq }}</el-descriptions-item>
                  <el-descriptions-item label="出院日期">{{ this.local_cyrq }}</el-descriptions-item>
                  <el-descriptions-item label="本地总费用">{{ this.local_zfy }}</el-descriptions-item>
                  <el-descriptions-item label="姓名" :content-style="{'width': '18%'}">{{ this.xm }}</el-descriptions-item>
                  <el-descriptions-item label="身份证" :content-style="{'width': '18%'}">{{ this.sfz }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="医保结算信息" :column="1" border>
                  <template slot="extra" class="">
                    <el-button v-loading.fullscreen.lock="fullscreenLoading" class="filter-item" style="margin-top: 10px;" size="small" type="primary" icon="el-icon-upload2" @click="exeScAllFymx">上传全部费用</el-button>
                    <el-button v-loading.fullscreen.lock="fullscreenLoading" class="filter-item" style="margin-top: 10px;" size="small" type="primary" icon="el-icon-circle-check" @click="doYsj">预结算</el-button>
                    <el-button v-loading.fullscreen.lock="fullscreenLoading" class="filter-item" style="margin-top: 10px;" size="small" type="success" icon="el-icon-star-off" @click="doFyjs()">结算</el-button>
                  </template>
                  <el-descriptions-item :content-style="{'text-align': 'right', 'width': '80%'}">
                    <template slot="label">
                      <svg-icon icon-class="zongfeiyong" />
                      医疗总费用
                    </template>
                    {{ this.js_ylzfy }}
                  </el-descriptions-item>

                  <el-descriptions-item :content-style="{'text-align': 'right', 'width': '80%'}">
                    <template slot="label">
                      <svg-icon icon-class="tongchoudingdan" />
                      统筹支付金额
                    </template>
                    {{ this.js_tczf }}
                  </el-descriptions-item>
                  <el-descriptions-item :content-style="{'text-align': 'right', 'width': '80%'}">
                    <template slot="label">
                      <svg-icon icon-class="xianjin" />
                      个人现金支付
                    </template>
                    {{ this.js_xjzf }}
                  </el-descriptions-item>
                  <el-descriptions-item :content-style="{'text-align': 'right', 'width': '80%'}">
                    <template slot="label">
                      <svg-icon icon-class="bianhao1" />
                      服务机构编号
                    </template>
                    {{ this.js_fwjgbh }}
                  </el-descriptions-item>
                  <el-descriptions-item :content-style="{'text-align': 'right', 'width': '80%'}">
                    <template slot="label">
                      <svg-icon icon-class="liushuihao" />
                      就诊流水号
                    </template>
                    {{ this.js_jzlsh }}
                  </el-descriptions-item>
                  <el-descriptions-item :content-style="{'text-align': 'right', 'width': '80%'}">
                    <template slot="label">
                      <svg-icon icon-class="fapiao" />
                      单据号(发票号)
                    </template>
                    {{ this.js_fph }}
                  </el-descriptions-item>
                  <el-descriptions-item :content-style="{'text-align': 'right', 'width': '80%'}">
                    <template slot="label">
                      <svg-icon icon-class="jiaocunshangxiaxianbili" />
                      统筹段自付比例
                    </template>
                    {{ this.js_tczfbl }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-card>
          </el-aside>
        </el-container>
      </el-card>
    </div>
    <!--表单组件-->
  </el-dialog>
</template>
<script>
import crudJzdj from '@/api/business/jzdj'
import crudZhsq from '@/api/business/zhsq'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { bisFymxId: null, bisFymxJzdjId: null, bisFymxJzdjLsh: null, bisFymxYbkh: null, bisFymxYjlx: null, bisFymxYyypbm: null, bisFymxCfh: null, bisFymxKfrq: null, bisFymxYbypbm: null, bisFymxMc: null, bisFymxDj: null, bisFymxSl: null, bisFymxZj: null, bisFymxJx: null, bisFymxJl: null, bisFymxSypc: null, bisFymxYf: null, bisFymxZxks: null, bisFymxZxts: null, bisFymxYbsflb: null, bisFymxSpr: null, bisFymxZdxmjkm: null, bisFymxYsxm: null, bisFymxJbr: null, bisFymxYysflb: null, bisFymxDw: null, bisFymxGg: null, bisFymxCfybz: null, bisFymxBzsl: null, bisFymxYl: null, bisFymxYpdzjgm: null, ywlx: null, lrr: null, lrrxm: null, lrbm: null, lrbmmc: null, lrsj: null, gxr: null, gxrxm: null, gxbm: null, gxbmmc: null, gxsj: null, sfyx: null, bz: null, bisFymxGrbh: null, bisFymxSfsc: null }
export default {
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '记账', url: 'api/fymx', idField: 'bisFymxId', sort: 'bisFymxKfrq,asc', crudMethod: { ...crudJzdj }})
  },
  data: function() {
    return {
      valueDate: new Date(),
      fyjsDialog: false,
      allHljgYmk: [],
      xm: '',
      sfz: '',
      jzid: '',
      zhid: '',
      zxks: '',
      ysxm: '',
      grbh: '',
      ybkh: '',
      jzlsh: '',
      todayAnonymous: '',
      fullscreenLoading: false,
      js_ylzfy: '',
      js_tczf: '',
      js_xjzf: '',
      js_fwjgbh: '',
      js_jzlsh: '',
      js_fph: '',
      js_tczfbl: '',
      local_zl: '',
      local_cyrq: '',
      local_ryrq: '',
      local_wsc: '',
      local_ysc: '',
      local_zfy: '',
      permission: {
        add: ['admin', 'fymx:add'],
        edit: ['admin', 'fymx:edit'],
        del: ['admin', 'fymx:del']
      },
      rules: {
        bisFymxSl: [
          { required: true, message: '数量不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created: function() {
  },
  mounted: function() {
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return this.fyjsDialog
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.beforeToEdit](crud, form) {
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.beforeToAdd](crud, form) {
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.afterSubmit](crud, form) {
    },
    fyjsCancel() {
      this.fyjsDialog = false
    },
    queryLocalFyxx() {
      crudJzdj.queryLocalFyxx({ jzid: this.jzid })
        .then(res => {
          console.log(res)
          this.local_zl = res.zl
          this.local_cyrq = res.cyrq
          this.local_ryrq = res.ryrq
          this.local_wsc = res.wsc
          this.local_ysc = res.ysc
          this.local_zfy = res.zfy
        })
        .catch(err => {
          console.log(err)
        })
    },
    doYsj() {
      this.fullscreenLoading = true
      crudJzdj.exeYjs({ jzid: this.jzid, cyrq: this.local_cyrq })
        .then(res => {
          this.fullscreenLoading = false
          this.$notify({
            title: '预结算结果已出',
            type: 'success',
            duration: 2500
          })
          console.log(res)

          const jsResult = res.split('|')

          this.js_ylzfy = jsResult[1]
          this.js_tczf = jsResult[24]
          this.js_xjzf = jsResult[25]
          this.js_fwjgbh = jsResult[34]
          this.js_jzlsh = jsResult[35]
          this.js_fph = jsResult[36]
          this.js_tczfbl = jsResult[42]
        })
        .catch(err => {
          this.fullscreenLoading = false
          this.$notify({
            title: err,
            type: 'warning',
            duration: 2500
          })
        })
    },
    async exeScSingleFymx(bisFymxId) {
      await this.$confirm('确认撤回并删除吗？')
        .then(_ => {
          this.fullscreenLoading = true
          crudJzdj.exeScSingleFymx({ fyid: bisFymxId, ywbm: '-1' })
            .then(res => {
              this.fullscreenLoading = false
              this.$notify({
                title: '撤回并删除成功',
                type: 'success',
                duration: 2500
              })
              console.log(res)
              this.crud.toQuery()
              this.queryLocalFyxx()
            })
            .catch(err => {
              this.fullscreenLoading = false
              this.$notify({
                title: err,
                type: 'warning',
                duration: 2500
              })
            })
        })
        .catch(_ => {})
    },
    /**
     * 机构执行上传所有费用明细
     */
    async exeScAllFymx() {
      this.fullscreenLoading = true
      await crudJzdj.exeScAllFymx({ jzid: this.jzid })
        .then(res => {
          this.fullscreenLoading = false
          this.$notify({
            title: '上传所有费用明细成功',
            type: 'success',
            duration: 2500
          })
          console.log(res)
          this.crud.toQuery()
          this.queryLocalFyxx()
        })
        .catch(err => {
          this.fullscreenLoading = false
          this.$notify({
            title: err,
            type: 'warning',
            duration: 2500
          })
        })
    },
    /**
     * 机构执行删除所有费用明细
     */
    async exeDlAllFymx() {
      await this.$confirm('确认撤回并删除吗？')
        .then(_ => {
          this.fullscreenLoading = true
          crudJzdj.exeDlAllFymx({ jzid: this.jzid })
            .then(res => {
              this.fullscreenLoading = false
              this.$notify({
                title: '删除所有费用明细成功',
                type: 'success',
                duration: 2500
              })
              console.log(res)
              this.crud.toQuery()
              this.queryLocalFyxx()
            })
            .catch(err => {
              this.fullscreenLoading = false
              this.$notify({
                title: err,
                type: 'warning',
                duration: 2500
              })
            })
        })
        .catch(_ => {})
    },
    async doFyjs() {
      await crudZhsq.findZhsqById({ zhid: this.zhid }).then(res => {
        console.log('getZhid:', res)
        if (res.hasOwnProperty('bisZhsqHldzSsqx')) {
          this.fullscreenLoading = true
          crudJzdj.exeFyjs({ jzid: this.jzid, cyrq: this.local_cyrq })
            .then(res => {
              this.fullscreenLoading = false
              this.$notify({
                title: '结算结果已出',
                type: 'success',
                duration: 2500
              })
              console.log(res)

              const jsResult = res.split('|')

              this.js_ylzfy = jsResult[1]
              this.js_tczf = jsResult[24]
              this.js_xjzf = jsResult[25]
              this.js_fwjgbh = jsResult[34]
              this.js_jzlsh = jsResult[35]
              this.js_fph = jsResult[36]
              this.js_tczfbl = jsResult[42]
            })
            .catch(err => {
              this.fullscreenLoading = false
              this.$notify({
                title: err,
                type: 'warning',
                duration: 2500
              })
            })
        } else {
          this.$notify({
            title: '请到【照护申请】→【已复核照护】菜单维护行政区划',
            type: 'warning',
            duration: 2500
          })
          return
        }
      })
    }
  }
}
</script>
<style scoped>

.is-selected {
  color: #1989fa;
}
.p-popover {
  text-align: center;
}
._calendar {
  height: 99.5%;
  width: 100%;
}
.el-main {
  padding: 0px;
  overflow: hidden;
}
.calendar-info {
  height: 94%;
}
.el-alert {
  margin: 15px 0px;
}
.el-alert:hover {
  transform: scale(1.02);
}
.el-alert:active {
  transform: scale(1.01);
}
</style>
<style >
._calendar .div-Calendar {
  height: 80px;
  box-sizing: border-box;
  padding: 8px;
  font-size: 12px;
}
._calendar .el-calendar-table .el-calendar-day {
  padding: 0px;
  height: 125px;
}
._calendar .el-container,
._calendar .el-calendar {
  height: 100%;
}
._calendar .el-card__body {
  padding: 0px;
}
</style>
<style rel="stylesheet/scss" lang="scss">
.user-info {
  padding-left: 0;
  list-style: none;
  li{
    border-bottom: 1px solid #F0F3F4;
    padding: 11px 0;
    font-size: 13px;
  }
  .user-right {
    float: right;
    margin-right: 10px;
    a{
      color: #317EF3;
    }
  }
}

.button-info {
  margin-top: 10px;
}
</style>
